<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>系统菜单管理</title>
    <meta name="description" content="">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="/resources/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/resources/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <script src="/resources/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/resources/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/resources/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/resources/css/app.css">
    <link rel="stylesheet" href="/resources/css/employee.type.css">
    <script src="/resources/js/jquery.min.js"></script>
    <script src="/resources/js/jquery.form.js"></script>

</head>

<body data-type="widgets">
<script src="/resources/js/theme.js"></script>
<div class="am-g tpl-g">
    <%--头部开始--%>
    <%@include file="header.jsp" %>
    <%--头部结束--%>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">

        <div class="container-fluid am-cf">
            <div class="row">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                        <div class="page-header-heading"><span class="am-icon-file-excel-o page-header-heading-icon"></span> 档案选项管理
                            <small>Recording options Manager</small>
                        </div>
                        <p class="page-header-description">档案选项管理</p>
                    </div>
                </div>
                <div class="am-u-lg-3 tpl-index-settings-button">
                    <%--<button type="button" class="page-header-button"--%>
                </div>
            </div>

        </div>

        <div class="row-content am-cf">
            <div class="row widget  am-cf" id="content">
                <!--<div class="am-u-md-1  am-u-lg-2"></div>-->
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <%--新的菜单模式--%>
                <form  id="proform" action="/pro/addpro" method="post">
                    <table width="100%" class="am-table am-table-bordered am-table-compact tpl-table-black "
                           id="example-r">
                        <caption>添加选项</caption>
                        <tr><td>问题</td><td colspan="4"><input type="text" name="content" placeholder="请输入问题" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td></tr>
                        <tr><td rowspan="2">选项:</td><td><input type="text" name="optiona" placeholder="选项1" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optionb" placeholder="选项2" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optionc" placeholder="选项3" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optiond" placeholder="选项4" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> </tr>
                        <tr><td><input type="text" name="optione" placeholder="选项5" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optionf" placeholder="选项6" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optiong" placeholder="选项7" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td><td><input type="text" name="optionh" placeholder="选项8" style="width: 100%;min-height: 40px;margin: 0;padding:0"></td></tr>
                        <tr><td colspan="5">说明：选项最多填写八个，最少一个，可以空着。</td></tr>
                    </table>
                </form>
                        <div style="width: 90%;align-content: center"> <button id="addProblem" type="button" class="am-btn am-btn-secondary am-radius tpl-error-btn">提交</button></div>
                    <table width="100%" class="am-table am-table-bordered am-table-compact tpl-table-black"
                           id="secondTable" style="display: none">
                        <caption>选项列表</caption>

                        </thead>
                        <tbody>
                        <%--<tr>--%>
                            <%--<td>1</td>--%>
                            <%--<td>2</td>--%>
                            <%--<td>3</td>--%>
                            <%--<td>--%>
                                <%--<div class="tpl-table-black-operation">--%>
                                    <%--<a href="javascript:editType('${type.emTypeId}');">--%>
                                        <%--<i class="am-icon-pencil"></i> 编辑--%>
                                    <%--</a>--%>
                                <%--</div>--%>

                            <%--</td>--%>
                        <%--</tr>--%>
                        </tbody>
                    </table>

                </div>
                <!--分页插件Start-->
                <div class="am-u-lg-12 am-cf paging">

                </div>
            </div>
        </div>
    </div>


    <div class="am-modal tpl-am-model-bd" id="type-model">
        <div class="am-modal-dialog">
            <div class="am-modal-hd row">
                <h2>一级菜单管理</h2><a href="javascript: void(0)" class="am-close am-close-spin"
                                  data-am-modal-close>&times;</a>
            </div>
            <input type="hidden" id="fristid">
            <div class="am-u-sm-3 am-u-lg-2">菜单名称</div>
            <div class="am-u-sm-9  am-u-lg-10 modal-input-div">
                <input type="text" id="fristName" name="fristName" placeholder="请输入英文字母" class="am-form-field" required>
            </div>
            <div class="am-u-sm-3 am-u-lg-2">菜单图标</div>
            <div class="am-u-sm-8 am-u-lg-9 modal-input-div">
                <input type="text" id="fristicon" name="typeInstruct" placeholder="请输入汉字" class="am-form-field"
                       required/>
            </div>
            <div class="am-u-sm-1 am-u-lg-1 modal-input-div" id="fristIconDiv"></div>
            <button type="button" id="fristAddBtn" class=" am-u-md-12  am-btn am-btn-primary" style="margin-top: 10px">
                添加
            </button>
        </div>
    </div>

    <div class="am-modal tpl-am-model-bd" id="seconde-type-model">
        <div class="am-modal-dialog">
            <div class="am-modal-hd row">
                <h2>二级菜单管理</h2><a href="javascript: void(0)" class="am-close am-close-spin"
                                  data-am-modal-close>&times;</a>
            </div>
            <input type="hidden" id="secondeId">
            <div class="am-u-sm-3 am-u-lg-2">名称</div>
            <div class="am-u-sm-9  am-u-lg-10 modal-input-div">
                <input type="text" id="secondeName" name="secondeName" placeholder="请输入汉字" class="am-form-field"
                       required>
            </div>
            <div class="am-u-sm-3 am-u-lg-2">链接</div>
            <div class="am-u-sm-9 am-u-lg-10 modal-input-div">
                <input type="text" id="secondeUrl" name="secondeUrl" placeholder="请输入链接" class="am-form-field"
                       readonly/>
            </div>
            <button type="button" id="secondeAddBtn" onclick="updateSecondMenu()"
                    class=" am-u-md-12  am-btn am-btn-primary" style="margin-top: 10px">添加
            </button>
        </div>
    </div>

        <div class="am-modal tpl-am-model-bd" id="promission-type-model">
            <div class="am-modal-dialog">
                <div class="am-modal-hd row">
                    <h2>请选择岗位授权</h2><a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
                </div>
                <%--<form action="/u/type" method="post">--%>
                <input type="hidden" id="menuId">
                <div class="am-u-sm-3 am-u-lg-2">名称</div>
                <div class="am-u-sm-9  am-u-lg-10 modal-input-div">
                    <select id="menudetali" data-am-selected="{btnSize: 'sm'}">
                        <%--<option value="option1">所有类别</option>--%>
                        <%--<option value="option2">IT业界</option>--%>
                        <%--<option value="option3">数码产品</option>--%>
                        <%--<option value="option3">笔记本电脑</option>--%>
                        <%--<option value="option3">平板电脑</option>--%>
                        <%--<option value="option3">只能手机</option>--%>
                        <%--<option value="option3">超极本</option>--%>
                    </select>
                </div>

            <div class="am-u-sm-9 am-u-lg-10 modal-input-div">

            </div>
            <button type="button" id="addBtnpro" class=" am-u-md-12  am-btn am-btn-primary" style="margin-top: 10px">添加
            </button>
        </div>
    </div>



    <script src="/resources/js/amazeui.min.js"></script>
    <script src="/resources/js/amazeui.datatables.min.js"></script>
    <script src="/resources/js/dataTables.responsive.min.js"></script>
    <script src="/resources/js/app.js"></script>
    <script>
        function addProblem() {
            $('#secondTable').empty();
            $('#proform').ajaxSubmit(function (res) {
                console.log(res);
                if (res.result) {
                    var data = res.data;
                    var tableStr ='  <tr><td>问题</td><td colspan="4"><input type="text" name="content" value="'+data.content+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" readonly></td></tr>\n' +
                        '<tr><td rowspan="2">选项</td><td><input type="text" name="optiona" value="'+data.optiona+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0" readonly></td> <td><input type="text"  value="'+data.optionb+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" readonly></td> <td><input type="text" name="optionc"  value="'+data.optionc+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0" readonly></td> <td><input type="text" name="optiond" p value="'+data.optiond+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" readonly></td> </tr>\n' +
                        '<tr><td><input type="text" name="optione" value="'+data.optione+'" style="width: 100%;min-height: 40px;margin: 0;padding:0" readonly></td> <td><input type="text" name="optionf" value="'+data.optionf+'" readonly style="width: 100%;min-height: 40px;margin: 0;padding:0"></td> <td><input type="text" name="optiong" value="'+data.optiong+'" readonly  style="width: 100%;min-height: 40px;margin: 0;padding:0"></td><td><input type="text" name="optionh" value="'+data.optionh+'"  style="width: 100%;min-height: 40px;margin: 0;padding:0" readonly></td></tr>';
                    $('#secondTable').append(tableStr);
                    $('#secondTable').show();
                    $('#proform')[0].reset();
                }else {
                    alert("数据失败，刷新页面重试");
                }
                return false;
            });
        }

        /**
         * 上传附件按钮绑定事件
         */
        $('#addProblem').click(function () {
            console.log("时间提交");
            addProblem();
        });
        
        
        
        function getPermisson(id) {
            var url = "/pro/getemptype";
            var meunid = $('#menuId');
            meunid.val(id);
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("服务器内部错误，请刷新重试");
                    return;
                }
               var menuslect= $('#menudetali');
                menuslect.empty();
                var optionString = "";
                for (var i=0;i<res.length;i++){
                    optionString += '<option value="'+res[i].emTypeId+'">'+res[i].typeInstruct+'</option>';
                }
                menuslect.append(optionString);
            }).fail(function () {
                alert("网络错误,请刷新重试");
            });
            $("#promission-type-model").modal();
        }

        $("#addBtnpro").click(function () {
            var menuId = $('#menuId').val();
            var etid = $('#menudetali').val();
            if (etid === null || etid === undefined || etid === '' || menuId === null || menuId === undefined || menuId === ''){
                alert("数据异常，请刷新页面重试");
                return;
            }
            var formData = new FormData();
            formData.append('eid', etid);
            formData.append('menuId', menuId);
            var url = "/pro/InsertMeuid";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                console.log(res);
                if (res === null || res === undefined || res === '') {
                    alert("服务器错误,请检查数据或者刷新页面重试");
                    return;
                }
                alert(res.data);
                window.location.reload();
                //  return res;
            }).fail(function (res) {
                console.log(res);
                alert("网络错误，请检查数据或者刷新页面重试");
            });

        });

        function editType(id) {
            $("#fristName").css("borderStyle", "");
            $("#fristName").css("borderColor", "");
            $("#fristName").css("borderWidth", "");
            var formData = new FormData();
            formData.append("id", id);
            var url = "/m/getOne";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                $("#fristIconDiv").empty();
                var modal = $('#type-model');
                $("#fristid").val(res.id);
                $("#fristName").val(res.name);
                $("#fristicon").val(res.icon);
                var icon ="<i class=\""+res.icon+"  sidebar-nav-link-logo am-icon-md\"></i>";
                $("#fristIconDiv").append(icon);
                modal.modal({'width': '600'});
            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了")

            });
        }
        $('#fristAddBtn').click(function () {
            var id=$("#fristid").val();
           var name= $("#fristName").val();
          var icon= $("#fristicon").val();

            if (!checkName(name)){
                alert("请检查输入的数据");
                return;
            }
            if (id === null || id === undefined || id === ''){
                alert("请检查输入的数据");
                return;
            }
            var formData = new FormData();
            formData.append("id", id);
            formData.append("name", name);
            formData.append("icon", icon);
            var url = "/m/update";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                window.location.reload();
                alert(res.data);

            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了");
            });

        });

        function seeMenu(mid) {
            var secondTable = $("#secondTable");
            secondTable.show();
            var bodyTable = $("#secondTable tbody");
            var formData = new FormData();
            formData.append("partid", mid);
            var url = "/m/getchild";
            var tableString = "";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                bodyTable.empty();
                for (var i = 0; i < res.length; i++) {
                    var thtd = " <tr><td>" + i + "</td>\n" +
                        "<td>" + res[i].name + "</td>" +
                        "<td>" + "<a href=\"" + res[i].href + "\">\n" + res[i].href +
                        "</a>\n" + "</td>\n" +
                        "<td>\n" +
                        "<div class=\"tpl-table-black-operation\">\n" +
                        "<a href=\"javascript:editChildType(" + res[i].id + ");\">\n" +
                        "<i class=\"am-icon-pencil\"></i> 编辑\n" +
                        "</a>\n" +
                        " <a href=\"javascript:getPermisson("+res[i].id+");\">\n" +
                        " <i class=\"am-icon-pencil\"></i> 授权\n" +
                        "  </a></div>\n" +
                        "</td>\n" +
                        "</tr>";
                    console.log(thtd);
                    tableString += thtd;
                }
                // console.log(tableString);
                bodyTable.append(tableString);
            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了")

            });
        }

        function hiddenMenu() {
            $("#secondTable").hide();
        }

        function editChildType(pid) {
            $("#secondeName").css("borderStyle", "");
            $("#secondeName").css("borderColor", "");
            $("#secondeName").css("borderWidth", "");
            $("#secondeName").focus();
            var formData = new FormData();
            formData.append("id", pid);
            var url = "/m/getOne";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                var modal = $('#seconde-type-model');
                $("#secondeId").val(res.id);
                $("#secondeName").val(res.name);
                $("#secondeUrl").val(res.href);
                modal.modal({'width': '600'});
            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了");
            });

        }

        function updateSecondMenu() {
            var id = $("#secondeId").val();
            var name = $("#secondeName").val();
            if (!checkName(name)){
                alert("请检查输入的数据");
                return;
            }
            var formData = new FormData();
            formData.append("id", id);
            formData.append("name", name);
            var url = "/m/update";
            $.ajax({
                url: url,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if (res === null || res === undefined || res === '') {
                    alert("网络开小差了");
                    return;
                }
                console.log(res);
                window.location.reload();
                alert(res.data);

            }).fail(function (res) {
                console.log(res);
                alert("网络开小差了");
            });
        }

        $("#fristName").change(function () {
            var name = $("#fristName").val();
            if (checkName(name)){
                $("#fristName").css("borderStyle", "");
                $("#fristName").css("borderColor", "");
                $("#fristName").css("borderWidth", "");
            }else {
                $("#fristName").css("borderStyle", "solid");
                $("#fristName").css("borderColor", "red");
                $("#fristName").css("borderWidth", "1px");
                $("#fristName").focus();
            }
        });


        $("#secondeName").change(function () {
            var name = $("#secondeName").val();
            if (checkName(name)){
                $("#secondeName").css("borderStyle", "");
                $("#secondeName").css("borderColor", "");
                $("#secondeName").css("borderWidth", "");
            }else {
                $("#secondeName").css("borderStyle", "solid");
                $("#secondeName").css("borderColor", "red");
                $("#secondeName").css("borderWidth", "1px");
                $("#secondeName").focus();
            }
        });

        function checkName(name) {
            //校验是否是中文
            var tireg = /^[\u2E80-\u9FFF]+$/;
            if ((tireg.test(name)) && name.length < 20) {
                return true;
            }
            return false;
        }

        $("#fristicon").change(function () {
            $("#fristIconDiv").empty();
            var iconString =$("#fristicon").val();
            var icon ="<i class=\""+iconString+"  sidebar-nav-link-logo am-icon-md\"></i>";
            $("#fristIconDiv").append(icon);
        });
    </script>

</body>

</html>
